<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box {
            width: 560px;
            height: 312px;
            background-color: rgb(249, 247, 248);
            border: 1px solid rgb(222, 222, 222);
            margin-left: 10px;
            margin-top: 10px;
        }

        .left {
            width: 456px;
            float: left;
        }

        .left img {
            width: 440px;
            height: 293px;
            margin-left: 8px;
            margin-top: 8px;
        }

        .right {
            height: 293px;
            margin-left: 8px;
            margin-top: 8px;
        }

        .right img {
            width: 95px;
            height: 62px;
            margin-top: 8px;
        }
        /* .right .opacity{
            opacity: 0.5;
        } */
    </style>
</head>

<body>
    <div class="box">
        <div class="left"><img src="../day15/images/1.jpg"  /></div>
        <div class="right">
            <img src="../day15/images/1.jpg" />
            <img src="../day15/images/2.jpg" />
            <img src="../day15/images/3.jpg" />
            <img src="../day15/images/4.jpg" />
        </div>
    </div>
</body>
<script>
    // 1、自动切换 图片
    // 2、鼠标移入右侧的图片 左边切换到对应的图片  鼠标移出  以当前的图片 自动继续切换图片
    // 3、当前显示的小图片 透明度为1  其他没有显示的保证透明度为0.5  
    var leftDom = document.querySelector(".left img");
    var rightDom = document.querySelectorAll(".right img");
    var index = 0;
    var timer;

    // 透明度改变
    changeOp();
    function auto (){
        timer = setInterval(function(){
            index ++
            if (index>3){
                index = 0;
            }
            leftDom.src = rightDom[index].src;
            changeOp();
        },1000)
    }
    // 透明度改变
    function changeOp(){
        rightDom.forEach(function(item,i){
              // 每次循环 i表示的是下标 index 也是下标 并且正好对应上
            item.style.opacity =i ==index?1:0.5;
        })
    }

    //自动切换
    auto();

    //移入移出
    rightDom.forEach(function(item,i){

        //移入
        item.addEventListener("mouseover",function(){
            //清除定时器
            clearInterval(timer);
            //显示当前图片为大图
            leftDom.src = this.src
            //修改index记录的值，从当前位置开始轮播
            index = i;
            //改变透明度
            changeOp();
        });

        //移出
        item.addEventListener("mouseout",auto)
    })
     
</script>